<template>
  <div
    class="w-full flex justify-between items-center py-0.5em"
    :class="showBorderBottom ? 'border-b' : ''"
  >
    <div class="flex-1 flex text-0.8em">
      <span class="font-bold mr-1em" v-if="title">{{ title }}</span>
      <div class="flex-1">
        <slot name="content">
          <span>{{ content }}</span>
        </slot>
      </div>
    </div>
    <van-icon name="arrow" v-if="showRight" />
  </div>
</template>

<script setup>
const props = defineProps({
  title: {
    typeof: String,
    default: '',
  },
  content: {
    typeof: String,
    default: '',
  },
  showRight: {
    typeof: Boolean,
    default: true,
  },
  showBorderBottom: {
    typeof: Boolean,
    default: true,
  },
})
</script>
